<template>
  <div>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 左侧要点聚焦区 -->
      <div class="left">
        <Content :dataList="focusData"/>
      </div>
      <!-- 右侧导航区域 -->
      <div class="right">
        <RightNav/>
      </div>
    </div>

    <!-- 内容区域2 -->
    <div class="content content2">

      <!-- 左侧会员故事 -->
      <div class="left">
        <Content :dataList="storiesData"/>
      </div>

      <!-- 右侧会员活动-->
      <div class="right">
        <Content :dataList="activitiesData"/>
      </div>
    </div>
  </div>
</template>

<script>
import { getFocusList, getMemberStories, getMemberActivities } from "@/api/content"

import RightNav from '@/views/Home/RightNav'
import Content from '@/views/Home/Content'

export default {
  name: 'MyContent',
	components: {
		RightNav,
    Content
	},
  data () {
    return {
      focusData: {},
      storiesData: {},
      activitiesData: {}
    }
  },
  created() {
    this.getList ()
  },
  methods: {
    // 获取文章列表数据
    async getList () {
      const res1 = await getFocusList()
      if (res1.code === 200) {
        this.focusData = res1.data
      }
      const res2 = await getMemberStories()
      if (res2.code === 200) {
        this.storiesData = res2.data
      }
      const res3 = await getMemberActivities()
      if (res3.code === 200) {
        this.activitiesData = res3.data
      }
      console.log(this.activitiesData)
    }
  }
}
</script>

<style lang='less' scoped>
/* 内容一的左右布局 */
.content {
  width: 1004px;
  display: flex;
  margin: 0 auto;
  
  .left {
    flex: 66.7%;
    padding-right: 15px;
  }

  .right {
    flex: 33.3%;
    padding-left: 15px;
  }
}

/* 内容二的左右布局 */
.content2 {
    margin-top: 36px;
		
		.left {
			flex: 50%;
		}

		.right {
			flex: 50%;
		}
	}
</style>